<template>
  <div class="inputnow">
    <div class="comment_item f-a-c">
      <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="" />
      <div class="input f-a-c">
        <input type="text" v-model="inputtext" :placeholder="name"  />
        <div class="upload f-a-c">
          <!-- <svg-icon name="icon-ptu" @click="imgupload" class="click"></svg-icon> -->
          <!-- <svg-icon
            @click="baoqingb"
            name="icon-biaoqing"
            class="click"
            style="margin-left: 10px"
          ></svg-icon> -->
        </div>
      </div>
      <div class="send f-j-a-c click" @click="sendmsg">
        <span>发布</span>
      </div>
    </div>
    <div class="biaoqingbao">
      <emotion
        v-if="showDialog"
        class="emotion"
        @emotion="emotion"
        :height="200"
      ></emotion>
    </div>
    <div class="imgbox" v-if="imgupCheck">
      <el-upload
        class="upload"
        :http-request="uploadChartlet"
        v-model:file-list="fileList"
        action=""
        :on-preview="handlePictureCardPreview"
        list-type="picture-card"
        :on-remove="handleRemove"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>
      <el-dialog v-model="dialogVisible" class="dialog">
        <img :src="dialogImageUrl" class="imgdialog" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { commentAdd } from "@/axios/api.js";
import { showLoading, hideLoading } from "@/utils/loading.js";

import { ElMessage } from "element-plus";
import { putFile } from "@/axios/api.js";
import Emotion from "@/components/index.vue";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  ref,
  watch,
} from "vue";
import { useStore } from "vuex";
export default defineComponent({
  props: {
    inputCheck: {
      type: Boolean,
      default: false,
    },
    reply: {
      type: Object,
      default: () => {},
    },
    typeID: {
      type: [String, Number],
      default: 0,
    },
    parentId: {
      type: [String, Number],
      default: 0,
    },
    uid: {
      type: [String, Number],
      default: 0,
    },
  },
  components: {
    Emotion,
  },
  setup(props, { attrs, slots, emit }) {
    watch(
      () => props.reply,
      (newVal, oldVal) => {
        data.name = newVal.name;
        let inputText = data.inputtext;
        data.inputtext = inputText;
      },
      {
        deep: true,
      }
    );
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });
    let detailid = computed(() => {
      return store.state.detailid;
    });
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      name: "说两句吧~",
      uploadProgresscheck: false,
      uploadProgress: 0,
      content: "",
      inputtext: "",
      showDialog: false,
      imgupCheck: false,
      fileList: [],
      chartletImgList: [],
      dialogImageUrl: "",
      dialogVisible: false,
    });

    // 发布评论
    let sendmsg = () => {
      if (!data.inputtext) {
        return ElMessage.error("请输入评论内容");
      }
      console.log(props.parentId,'props.parentIdprops.parentIdprops.parentId');
      // if(props.parentId){

      // }
      commentAdd({
        modelId: detailid.value,
        detail: data.inputtext,
        parentId: props.parentId,
        replyUserId: props.uid,
      }).then((res) => {
        emit("sendType", props.parentId);
        data.inputtext = "";
        ElMessage.success("评论成功");
      });
    };
    let getemotion = (res) => {
      let word = res.replace(/\#|\;/gi, "");
      const list = [
        "微笑",
        "撇嘴",
        "色",
        "发呆",
        "得意",
        "流泪",
        "害羞",
        "闭嘴",
        "睡",
        "大哭",
        "尴尬",
        "发怒",
        "调皮",
        "呲牙",
        "惊讶",
        "难过",
        "酷",
        "冷汗",
        "抓狂",
        "吐",
        "偷笑",
        "可爱",
        "白眼",
        "傲慢",
        "饥饿",
        "困",
        "惊恐",
        "流汗",
        "憨笑",
        "大兵",
        "奋斗",
        "咒骂",
        "疑问",
        "嘘",
        "晕",
        "折磨",
        "衰",
        "骷髅",
        "敲打",
        "再见",
        "擦汗",
        "抠鼻",
        "鼓掌",
        "糗大了",
        "坏笑",
        "左哼哼",
        "右哼哼",
        "哈欠",
        "鄙视",
        "委屈",
        "快哭了",
        "阴险",
        "亲亲",
        "吓",
        "可怜",
        "菜刀",
        "西瓜",
        "啤酒",
        "篮球",
        "乒乓",
        "咖啡",
        "饭",
        "猪头",
        "玫瑰",
        "凋谢",
        "示爱",
        "爱心",
        "心碎",
        "蛋糕",
        "闪电",
        "炸弹",
        "刀",
        "足球",
        "瓢虫",
        "便便",
        "月亮",
        "太阳",
        "礼物",
        "拥抱",
        "强",
        "弱",
        "握手",
        "胜利",
        "抱拳",
        "勾引",
        "拳头",
        "差劲",
        "爱你",
        "NO",
        "OK",
        "爱情",
        "飞吻",
        "跳跳",
        "发抖",
        "怄火",
        "转圈",
        "磕头",
        "回头",
        "跳绳",
        "挥手",
        "激动",
        "街舞",
        "献吻",
        "左太极",
        "右太极",
      ];
      let index = list.indexOf(word);
      return `<img src="https://res.wx.qq.com/mpres/htmledition/images/icon/emotion/${index}.gif" style="vertical-align: sub;" align="middle">`;
    };
    // 文件贴图上传
    let uploadChartlet = async (e) => {
      if (data.fileList.length >= 8)
        return ElMessage.error(t("createNft.d3ModelMapTitle")); //最多上传十张贴图
      data.uploadProgresscheck = true;
      showLoading();
      let formData = new FormData();
      console.log(e.file);
      let uid = e.file.uid;
      formData.append("file", e.file);
      await putFile(formData).then((res) => {
        data.uploadProgresscheck = false;
        let datas = {};
        datas.uid = uid;
        datas.link = res.data.link;
        data.chartletImgList.push(datas);
        hideLoading();
      });
    };
    let emotion = (i) => {
      console.log(i);
      data.content += i;
      data.inputtext = data.content;
    };
    let baoqingb = () => {
      data.showDialog = !data.showDialog;
    };
    let handleRemove = (uploadFile) => {
      let uids = uploadFile.raw.uid;
      data.chartletImgList = data.chartletImgList.filter(
        (item) => item.uid !== uids
      );
      if (data.chartletImgList.length == 0) {
        data.imgupCheck = false;
      }
    };
    let handlePictureCardPreview = (uploadFile) => {
      data.dialogImageUrl = uploadFile.url;
      data.dialogVisible = true;
    };
    let imgupload = () => {
      data.imgupCheck = !data.imgupCheck;
    };
    onMounted(() => {});
    onUnmounted(() => {});
    return {
      blur,
      userInfo,
      detailid,
      sendmsg,
      handleRemove,
      uploadChartlet,
      imgupload,
      handlePictureCardPreview,
      getemotion,
      emotion,
      baoqingb,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.dialog {
  width: 500px;
  height: 500px;
  .imgdialog {
    width: 100%;
    height: 100%;
  }
}

.progress {
  width: 148px;
  position: absolute;
  bottom: 0;
}
.upload {
}
.imgbox {
  margin-top: 20px;
}
.inputnow {
  position: relative;
}
.biaoqingbao {
  z-index: 10;
  background-color: #fff;
  position: absolute;
  right: 0;
  width: 300px;
}
.upload {
  margin-right: 20px;
}
.comment_item {
  margin-top: 22px;
  > img {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-right: 20px;
  }
  .input {
    width: 820px;
    height: 50px;
    opacity: 1;
    background: #f3f4f5;
    border-radius: 10px 10px 10px 10px;

    > input {
      background: #f3f4f5;
      border-radius: 10px 10px 10px 10px;
      border: none;
      width: 95%;
      height: 100%;
      padding-left: 10px;
    }
  }
  .send {
    margin-left: 10px;
    width: 100px;
    height: 50px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #ffffff;
    }
    &:active {
      opacity: 0.7;
    }
  }
}
</style>
